<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        /* vw是相对于视口viewport宽度的百分比 */
        /* vh就是相对于视口viewport高度的百分比 */
        .box2 {
            width: 50vw;
            height: 50vh;
            background-color: brown;
        }

        /* vmax是相对于高或宽的百分比，谁大就相对于谁 */
        /* vmin也是相对于高或宽的百分比，谁小就相对于谁 */
        .box3 {
            width: 20vmax;
            height: 20vmin;
            background-color: brown;
        }
    </style>
</head>
<body>

    <div class="box1">像素</div>
    <div class="box2">像素</div>
    <div class="box3">像素</div>
    
</body>
</html>